<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fetch发送请求</title>
</head>

<body>
    <script>
        fetch("http://localhost:3000/fdata").then((data) => {
            // data并不是返回值，而是一个对象
            console.log('fetch', data);

            console.log('fetch  Promise', data.text() instanceof Promise);

            //   获取返回值--把Promise返回，下一个then拿到的就是真实的返回值
            return data.text();
        }).then(data => {
            console.log('真实数据：', data);
        });

        // 地址方式传递参数
        fetch("http://localhost:3000/news?id=10001",{ method:'get'}).then((data) => {
            //   获取返回值--把Promise返回，下一个then拿到的就是真实的返回值
            return data.text();
        }).then(data => {
            console.log('真实数据：', data);
        });

        // restful方式传递参数
        fetch("http://localhost:3000/news/10003",{method:'get'}).then((data) => {
            //   获取返回值--把Promise返回，下一个then拿到的就是真实的返回值
            return data.text();
        }).then(data => {
            console.log('真实数据：', data);
        });


        // POST请求
        fetch("http://localhost:3000/news",{
            method:'post',
            body: 'a=1&b=2',
            headers:{
                'Context-Type':'application/x-www-form-urlencoded'
            }
        }).then((data) => {
            //   获取返回值--把Promise返回，下一个then拿到的就是真实的返回值
            return data.text();
        }).then(data => {
            console.log('真实数据：', data);
        });

        // JSON 数据
        fetch("http://localhost:3000/news2",{
            method:'post',
            body: {
                a:1,
                b:2
            },
            headers:{
                'Context-Type':'application/json'
            }
        }).then((data) => {
            //   获取返回值--把Promise返回，下一个then拿到的就是真实的返回值
            return data.text();
        }).then(data => {
            console.log('真实数据：', data);
        });



        // 去MDN 查询fetch的文档
    </script>
</body>

</html>